<template>
    <section id="Home">
        <div class="home-main">
            <div class="home-image" ref="imageRef">
                <img src="../../../src/assets/image/law.jpg" alt="" />
            </div>

            <div class="home-content">
                <p>Hello,</p>
                <h2>我是羅卓，一个前端搬砖工...</h2>
                <span class="tip">Welcome my homepage</span>
                <div class="close">
                    <a href="#" class="fa fa-code"></a>
                    <span>你好啊，靓仔</span>
                </div>
                <a href="#B" id="btn" class="home-btn section-btn">start</a>
            </div>
        </div>
    </section>
</template>

<script>
import { defineComponent, reactive, onMounted } from 'vue';
import scrollReveal from 'scrollreveal';

export default defineComponent({
    setup() {

        // const imageRef = ref(null);

        const data = reactive({
            scrollReveal: scrollReveal()
        })
        const retScroll = (param) => {
            data.scrollReveal.reveal(param, {
                duration: 600,
                delay: 500,
                origin: 'left',
                mobile: true,
                distance: '1rem',
                easing: 'linear',
                reset: true
            })
        }
        const retScroll2 = (param) => {
            data.scrollReveal.reveal(param, {
                duration: 600,
                delay: 800,
                origin: 'left',
                mobile: true,
                distance: '1rem',
                easing: 'linear',
                reset: true
            })
        }
        const retScroll3 = (param) => {
            data.scrollReveal.reveal(param, {
                duration: 600,
                delay: 500,
                origin: 'bottom',
                mobile: true,
                distance: '1rem',
                easing: 'linear',
                reset: true
            })
        }
        onMounted(() => {
            retScroll('.home-image');
            retScroll3('.close');
            retScroll2('h2');
            retScroll('p');
            retScroll3('.tip');
        })


        return {

        };
    }
});
</script>

<style scoped lang="scss">
section {
    height: 100%;
    width: 100%;
}

#Home {
    position: relative;
    z-index: 1;
    .home-main {
        position: absolute;

        .home-image {
            margin-bottom: 1rem;
            cursor: pointer;
            img {
                border-radius: 50%;
                box-shadow: 5px 0px 5px #d1d9e6, -5px 0px 5px #f9f9f9;
                width: 6rem;
                height: 6rem;
            }
        }
        .home-content {
            p {
                color: #3d3d3f;
                font-size: 2rem;
                font-weight: 200;
                letter-spacing: 0.08rem;
            }
            h2 {
                color: #575757;
                font-weight: 200;
                line-height: 4rem;
                cursor: pointer;
                font-size: 1.2rem;
            }
            span {
                color: #797979;
                line-height: 2rem;
                font-size: 1rem;
            }
            .close {
                position: relative;
                margin: 1rem 0 2rem;
                height: 1.8rem;
                a {
                    position: absolute;
                    top: 0.15rem;
                    left: 0.15rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 1.5rem;
                    height: 1.5rem;
                    border-radius: 50%;
                    color: #222222;
                    font-size: 1rem;
                    z-index: 2;
                    box-shadow: 2px 0px 5px #d1d9e6, -2px 0px 2px #f9f9f9;
                }
                a:hover + span {
                    transform: rotate(360deg);
                    opacity: 1;
                    background-color: #222222;
                    color: #fff;
                }
                span {
                    display: inline-block;
                    width: auto;
                    padding: 0 1rem;
                    height: 100%;
                    line-height: 1.8rem;
                    background: black;
                    border-radius: 1rem;
                    text-align: center;
                    position: absolute;
                    color: #fff;
                    text-indent: 1.5rem;
                    opacity: 0;
                    transform-origin: 10% center;
                    transition: all 1s;
                    font-size: 0.8rem;
                    z-index: 1;
                }
            }
        }
    }
}
@media (max-width: 1024px) {
    #Home {
        .home-main {
            top: 26%;
            left: 15%;
            .home-image {
                img {
                    width: 5rem;
                    height: 5rem;
                }
            }
            .home-content {
                h2 {
                    font-size: 1.1rem;
                }
            }
        }
    }
}
@media screen and (min-width: 1024px) and (max-width: 1680px) {
    #Home {
        .home-main {
            top: 32%;
            left: 15%;
            display: flex;
            .home-image {
                margin-right: 3rem;
            }
            .home-content {
                margin-top: 1.5rem;
            }
            .home-btn {
                padding: 0.8rem 1.5rem 1rem;
            }
        }
    }
}
@media (min-width: 1680px) {
    #Home {
        .home-main {
            top: 35%;
            left: 25%;
            display: flex;
            .home-image {
                margin-right: 3rem;
            }
            .home-content {
                margin-top: 1.5rem;
            }
            .home-btn {
                padding: 0.8rem 1.5rem 1rem;
            }
        }
    }
}
</style>
